@charset "utf-8";

// 变量
@images: "../images";
@color_border-tb: #bfbfbf;
@color_p: #757474;
@color_border: #ccc;
@color_required: rgba(253, 8, 8, 0.29);
@color_span: #dfdada;
@color_shadow: #dad7d7;
@large_header: 60px;
@large_ula: 35px;
@large_articleh1: 110px;
@large_articleem: 40px;
@large_articlep: 40px;
@large_button: 40px;
@width_content: 70.9%;
@width_aside: 20.9%;
@width_asidebutton: 90%;
@width_artimg: 25%;
@width_em: 55%;
@line-height_articlep: 45px;

// 样式类
.border_tb(t) { border-bottom: 5px double @color_border-tb; }
.border_tb(b) { border-top: 5px double @color_border-tb; }
.uldis(a){ display: table; }
.uldis(b){ display: table-row; }
.uldis(c){ display: table-cell; }

.header { background-image: url('@{images}/headerpic.png'); background-position: left top; background-repeat: repeat-x; margin: 0 auto; padding-top: 70px; width: 96%; margin-bottom: 30px; }

.header_a{ text-decoration: none; color: #000; letter-spacing: -3px; font-size: @large_header; }

.header_nav { width: 100%; .border_tb(t); }

.header_nav768 { background-image: url('@{images}/menu.png'); background-position: 5px 10px; background-repeat: no-repeat; background-color: #fff; letter-spacing: 1px; border: 1px solid #bfbfbf; position: absolute; top: 10px; left: 0; padding: 5px 10px; padding-left: 30px; box-shadow: 1px 1px 3px #666; border-radius: 5px; }

.content { float: right; width: @width_content; margin-right: (96-(@width_content+@width_aside)) / 3 + 1; }

.rlgbackground { background: repeating-linear-gradient(45deg, #fff, @color_border 1%, #fff 2%); border-radius: 8px; }

.article_img { width: @width_artimg; float: left; margin-right: ((100-(@width_artimg+@width_em)) / 4) * 1; margin-bottom: 50px;  }

.article_h1font(@font_size: @large_articleh1) { font-size: @font_size; font-weight: 400; text-shadow:2px 0 0 white, 4px 4px 1px #dad7d7; margin-bottom: 20px; letter-spacing: 5px; }

.article_emfont(@font_size: @large_articleem) {  width: @width_em; float: left; word-wrap: break-word; font-size: @font_size; color: #504e4e; text-shadow: none; margin-right: ((100-(@width_artimg+@width_em)) / 4) * 3; margin-bottom: 15px; }

.article_pfont(@font_size: @large_articlep, @line_height: @line-height_articlep) { font-size: @font_size; line-height: @line-height_articlep; margin-bottom: 15px; font-family: 'ColaborateThinRegular'; color: @color_p; }

.article_button(@padding_tb: 20px, @padding_lr: 35px, @font_size: @large_button) { transition: all 1s ease; padding: @padding_tb @padding_lr; background-color: #b01c20; font-size: @font_size; border-radius: 8px; box-shadow: 1px 1px 0 -1px white, 3px 3px 5px black; color: white; margin-bottom: 30px;
	&:hover { color: #000; border: 1px solid #000; text-shadow: 0 1px #fff; box-shadow: 1px 1px 5px #000 inset; }
}

/* form */
.fieldset { border: 1px dotted @color_border; background-color: #fff; border-radius: 5px; box-shadow: 2px 2px 5px @color_shadow; padding: 10px; margin-bottom: 20px; }

.legend { float: left; width: 100%; font-size: 14px; font-style: italic; margin-bottom: 30px; }

.inputdiv { margin-bottom: 10px; float: left; width: 100%; }

.normal { width: 40%; float: right; padding: 5px; font-size: 20px; border-radius: 8px; border: 1px solid @color_border; transition: background .8s ease-out; }

.range { width: 40%; float: right; font-size: 14px; }

.required { border: 1px solid @color_required !important; }

.submithover { color: #000; border: 1px solid #000; text-shadow: 0 1px #fff; box-shadow: 1px 1px 5px #000 inset; }

.submit { transition: all 1s ease; padding: 10px 30px; background-color: #b01c20; font-size: 30px; border-radius: 6px; box-shadow: 1px 1px 0 -1px white, 3px 3px 5px black; color: white; float: right; }

.aside { float: left; width: @width_aside; margin-left: (96-(@width_content+@width_aside)) / 3 + 1; border-right: 2px solid #e8e8e8; padding-right: (96-(@width_content+@width_aside)) / 3; background: radial-gradient(#cfcfcf, #fff 85%); }

.aside_button(@width: @width_asidebutton, @font_size: 16px) { text-align: center; width: @width; border: 1px solid #999; color: #5c5959; margin: 15px 0; border-radius: 10px; font-size: @font_size; background-color: inherit; }

.footer { .border_tb(b); background-image: url('@{images}/footerpic.png'); background-position: left bottom; background-repeat: repeat-x; width: 96%; margin: 0 auto; clear: both; text-align: center; padding-bottom: 40px; }

.footer_p { color: @color_p; font-size: 20px; margin: 15px auto 25px; word-wrap: break-word; }

/* ----------------------------------------------------- 样式开始 ----------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------- */
/* 0- */
/* header */
header { .header;
	a { .header_a; span { color: @color_span; } }
	nav { .header_nav; .uldis(a);
		ul { .uldis(b); z-index: 100;
			span { display: none; }
			li { text-decoration: none; .uldis(c); text-align: center;
				a { font-size: @large_ula; letter-spacing: 1px;
					&:hover { -webkit-animation-name: shining; -webkit-animation-duration: 1500ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; }
				}
			}
			li:first-of-type { text-decoration: underline; text-align: left; }
			li:nth-of-type(odd) a { color: red; }
			li:nth-of-type(even) a{ color: black; }
			li:last-of-type { text-align: right; }
		}
	}
}
@-webkit-keyframes shining {
	0% { text-shadow: 0 0 3px #EEC900, 0 0 3px #000; }
	50% { text-shadow: 0 0 35px #EEC900, 0 0 35px #000; }
	100% { text-shadow: 0 0 3px #EEC900, 0 0 3px #000; }
}

/* article */
#content { .content; }
article {
	img { .article_img; }
	h1 { .article_h1font; }
	em { .article_emfont; }
	p { .article_pfont; }
	p:nth-of-type(2) { .article_pfont(30px); }
	button { .article_button; margin-bottom: 25px; }
	/* form */
	fieldset   { .fieldset;
		legend { .legend }
		div { .inputdiv;
			label { float: left; }
			textarea, input:not([type="range"]):not([type="submit"]) {
				.normal;
				&:not([type="number"]):focus:invalid { background: url('@{images}/wrong.png') no-repeat 98% 50%; }
				&:not([type="number"]):focus:valid { background: url('@{images}/check.png') no-repeat 98% 50%; }
			}
			input[type="range"] { .range;
				&:focus { border-radius: 15px; font-size: 15px; }
			}
			input:required { .required; }
		}
	}
	form input[type="submit"] { .article_button(10px, 50px, @large_button - 10px); float: right; }
	
}

/* aside */
aside { .aside;
	h1 { text-align: left; margin-bottom: 30px; }
	a { float: left; width: 50%; text-align: center; }
	img { -webkit-animation-name: swing; -webkit-animation-duration: .2s; -webkit-animation-delay: 1s; -webkit-animation-iteration-count: 2; -webkit-animation-timing-function: ease-in-out; border-radius: 5px; box-shadow: 0px 3px 6px -1px #444; max-width: 98%; }
	a:nth-of-type(even) img { transform: rotate(3deg); }
	a:nth-of-type(odd) img { transform: rotate(-3deg); }
	button { .aside_button(); }
	@-webkit-keyframes swing {
	0% { -webkit-transform: scale(.9, .9); }
	50% { -webkit-transform: scale(.98, .98); }
	100% { -webkit-transform: scale(0.9, 0.9); }
}
}


/* footer */
footer {
	.footer;
	p {
		.footer_p;
		span { color: @color_span; float: inherit; }
	}
}


/* 0-320 */
@media (max-width: 320px) {
article h1 { font-size: 55px; }
article em { font-size: 25px; margin-bottom: 10px; }
article p { font-size: 20px; line-height: 30px; }
article p:nth-of-type(2) { margin-bottom: 20px; }
}


/* 0-768 */
@media (max-width: 768px) {
/* header */
header { text-align: left; }
header a { font-size: 45px; }
nav a { font-size: 30px; }
nav { position: relative; padding: 25px 0 !important;  }
nav ul { .header_nav768; }
nav ul span { display: block !important; color: #504e4e; letter-spacing: 2px; }
nav ul li:first-of-type { margin-top: 10px; text-decoration: none !important; }
nav ul li:last-of-type { border-bottom: none; }
nav ul li { display: none !important; text-align: inherit !important; border-bottom: 1px solid #bfbfbf; }
nav ul li a { color: #757474 !important; font-size: 20px !important; float: inherit !important; line-height: 35px; }
.liShow { display: block !important; }

/* article */
#content { float: inherit; width: 96%; margin: 0 auto 25px; border-bottom: 2px solid #bfbfbf; }
article h1 { font-size: 70px; }
article em { font-size: 35px; }
article p { font-size: 30px; line-height: 35px; }
article p:nth-of-type(2) { margin-bottom: 30px; }
article button { .article_button(20px, 30px, @large_button - 10px); width: 100%; letter-spacing: 8px; }
// 继承的权值低，添加article增加权值
article form input[type="submit"]:extend(article button) { width: 100%; float: inherit; }

/* aside */
aside { width: 96%; border-right: none; margin: 0 auto 10px; padding: 0; float: inherit; }
aside img { max-width: 95%; }
aside button { width: 80%; }
/* footer */
}

/* 768px-992px */
@media (min-width: 768px) and (max-width: 992px) {
/* header */
header > a { font-size: 50px; }
/* article */
article h1 { font-size: 90px; }
article em { font-size: 25px; }
article p { font-size: 25px; line-height: 30px; }
article p:nth-of-type(2) { margin-bottom: 25px; }
article button { font-size: 18px; padding: 10px 25px; }
article nav li a { font-size: 30px; }
/* aside */
aside button { width: 95%; font-size: 12px; }
/* footer */
}


/* 992-1200px */
@media (min-width: 992px) and (max-width: 1200px) {
/* article */
article h1 { font-size: 90px; }
article em { font-size: 30px; margin-bottom: 10px; }
article p { font-size: 30px; line-height: 35px; }
article button { font-size: 25px; padding: 15px 30px; }
}


/* 1200- */
@media (min-width: 1200px) {}